import Vue from 'vue'
import Button from './button.vue'
import Icon from './icon.vue'
import ButtonGroup from './button-group.vue'
import GuluInput from './input.vue'

Vue.component('g-button', Button)
Vue.component('g-icon', Icon)
Vue.component('g-button-group', ButtonGroup)
Vue.component(GuluInput.name, GuluInput)

new Vue({
  el: '#app',
  data: {
    loading: true,
    msg: '展示'
  }
})

// 单元测试
import chai from 'chai'
import spies from 'chai-spies'

chai.use(spies)


const expect = chai.expect

try {
  
  {
    let Constructor = Vue.extend(Button)
    const button = new Constructor({
      propsData: {
        icon: 'setting'
      }
    })
    button.$mount()
    let  useElement = button.$el.querySelector('use')
    let href = useElement.getAttribute('xlink:href')
    expect(href).to.eq('#icon-setting')
    button.$el.remove()
    button.$destroy()
  }

  {
    let Constructor = Vue.extend(Button)
    const button = new Constructor({
      propsData: {
        icon: 'setting',
        loading: true
      }
    })
    button.$mount()
    let  useElement = button.$el.querySelector('use')
    let href = useElement.getAttribute('xlink:href')
    expect(href).to.eq('#icon-loading')
    button.$el.remove()
    button.$destroy()
  }

  {
    const div = document.createElement('div')
    document.body.appendChild(div)
    let Constructor = Vue.extend(Button)
    const button = new Constructor({
      propsData: {
        icon: 'setting'
      }
    })
    button.$mount(div)
    let  svg = button.$el.querySelector('svg')
    let {order} = window.getComputedStyle(svg)
    expect(order).to.eq('1')
    button.$el.remove()
    button.$destroy()
  }

  {
    const div = document.createElement('div')
    document.body.appendChild(div)
    let Constructor = Vue.extend(Button)
    const button = new Constructor({
      propsData: {
        icon: 'setting',
        iconPosition: 'right'
      }
    })
    button.$mount(div)
    let  svg = button.$el.querySelector('svg')
    let {order} = window.getComputedStyle(svg)
    expect(order).to.eq('2')
    button.$el.remove()
    button.$destroy()
  }

  // mock 函数

  {
    let Constructor = Vue.extend(Button)
    const button = new Constructor({
      propsData: {
        icon: 'setting',
        iconPosition: 'right'
      }
    })
    button.$mount()

    let spy = chai.spy(function(){})

    button.$on('click', spy)
    button.$el.click()
    expect(spy).to.have.been.called()
  }
} catch (error) {
  window.errors = [error]
} finally {
  window.errors && window.errors.forEach((error) => {
    console.log(error.message)
  })
}
